<template>
  <a-date-picker
    v-model="timeValue"
    :open="isOpen"
    mode="year"
    placeholder="请选择年份"
    format="YYYY"
    @openChange="handleOpenChange"
    @panelChange="handlePanelChange"
  />
</template>
<script>
import moment from "moment";

export default {
  name: "FormYear",
  props: {
    onCallBack: {
      type: Function,
      default: () => {},
    },
    dataIndex: {
      type: [String, Number],
      default: null,
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      timeValue: null,
      isOpen: false,
      time: null,
    };
  },
  methods: {
    handleOpenChange(status) {
      if (status) {
        this.isOpen = true;
      } else {
        this.isOpen = false;
      }
    },
    handlePanelChange(value) {
      let newT = moment(value._d).format("YYYY");
      this.timeValue = newT;
      this.onCallBack(newT);
      this.isOpen = false;
    },
  },
  watch: {
    formData: {
      handler(nVal, oVal) {
        this.timeValue = nVal[this.dataIndex] ? moment(nVal[this.dataIndex]).format("YYYY") : null;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped></style>
